<template>
	<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/lockpic.png" class="pageimg" mode="widthFix"
		v-if="passOpen==1"></image>
	<view class="home" v-else>
		<!-- <image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11508@2x.png" class="homeimg" mode=""></image> -->
		<view class="headerbox" :style="{'background':back1}">
			<view class="header" :style="{'margin-top':statusBarHeight+'px','height':barHeight+'px'}">
				<view class="shanglogo" @click="gopage('地址')">
					<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11486@2x.png" class="logo"
						mode=""></image>
					<view class="mendianname">{{mendianname}}</view>
					<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Frame@2x (4).png" class="arrow"
						mode=""></image>
				</view>
				<view class="arrowbox1">
					<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11488@2x.png"
						class="arrowbox" @click="gopage('通知公告')" mode=""></image>
					<view class="readuce" v-if="comnum">

					</view>
				</view>

			</view>
		</view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in list1" :key="index">
					<image :src="item" mode="heightFixge">
				</swiper-item>
			</swiper>
		</view>
		<view class="bottombox">
			<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11447@2x.png" class="bottombox_img"
				mode=""></image>
			<view class="centerbox">
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11512@2x.png"
					class="centerbox_img" mode=""></image>
				<view class="caozuobox" @click="gopage('详情',homeobj.czzn.id)">
					<view class="texts" v-if="homeobj.czzn">
						<view class="t1">
							{{homeobj.czzn.title}}
						</view>
						<view class="t2">
							{{homeobj.czzn.detail}}
						</view>
					</view>
					<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Frame@2x (3).png" class="arrow"
						mode=""></image>
				</view>
				<view class="timechoujiang">
					<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Vector 9@2x.png" mode=""></image>
					5.12-6.2--天天有奖
					<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Vector 10@2x.png" mode=""></image>
				</view>
				<image :src="homeobj.project.image" mode="" class="go" @click="gopage('活动详情',homeobj.project.id)">
				</image>
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11494@2x.png" mode=""
					class="gobtn" @click="statr">
				</image>
			</view>
			<view class="" style="height: 190rpx;">

			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="choujiangmabox" v-show="typestr=='今日任务已完成'">
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/微信图片_20250506160104.png" class="back">
				</image>
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/微信图片_20250506144136.png" class="close"
					mode="" @click="close"></image>
				<view class="centertop">
					<view class="centertop_toptext">
						任务流程
					</view>
					<view class="renwufenleis">
						<view class="itembtn">
							任务一
						</view>
						<view class="itembtn">
							任务二
						</view>
						<view class="itembtn1">
							任务三
						</view>
					</view>
					<view class="jindu">
						<view class="center2">
							<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Mask group@2x.png"
								class="centerimgjindu" mode=""></image>
							<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/download 49@2x.png"
								class="hjtou" mode="heightFix">
							</image>
						</view>
					</view>
					<view class="textsline">
						<view class="text">
							到店消费
						</view>
						<view class="text">
							答题并分享海报
						</view>
						<view class="text">
							次日消费
						</view>
					</view>
				</view>
				<view class="contents" style="margin-top: 100rpx;">
					<view class="title" style="width: 400rpx;text-align: center;">
						今日任务已完成
					</view>
					<view class="haibaobox">
						<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11468@2x.png" mode="">
						</image>
					</view>
					<view class="btn" @click="close">
						关闭
					</view>
				</view>
			</view>


			<view class="choujiangmabox" style="height: 1028rpx;" v-show="typestr=='任务已完成'||typestr=='全部任务已完成'">
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/微信图片_20250506160104.png"
					style="height: 1028rpx;" class="back"></image>
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/微信图片_20250506144136.png" class="close"
					mode="" @click="close"></image>
				<view class="centertop">
					<view class="centertop_toptext">
						任务流程
					</view>
					<view class="renwufenleis">
						<view class="itembtn">
							任务一
						</view>
						<view class="itembtn">
							任务二
						</view>
						<view class="itembtn1">
							任务三
						</view>
					</view>
					<view class="jindu">
						<view class="center1">
							<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Mask group@2x.png"
								class="centerimgjindu" mode=""></image>
							<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/download 49@2x.png"
								class="hjtou" mode="heightFix">
							</image>
						</view>
					</view>
					<view class="textsline">
						<view class="text">
							到店消费
						</view>
						<view class="text">
							答题并分享海报
						</view>
						<view class="text">
							次日消费
						</view>
					</view>
				</view>
				<view class="contents" style="margin-top: 100rpx;">
					<view class="title" style="width: 400rpx;text-align: center;margin-top: 92rpx;"
						v-if="typestr=='任务已完成'">
						活动期间二次消费达标获取{{huojiangmaobj.jiang||1}}个奖品码
					</view>
					<view class="title" style="width: 400rpx;text-align: center;margin-top: 92rpx;" v-else>
						任务已完成
					</view>
					<view class="haibaobox" style="height: 309.99rpx;">
						<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11468@2x.png"
							style="height: 309.99rpx;" mode="">
						</image>
					</view>
					<view class="texts"
						style="width: 100%;display: flex;justify-content: space-between;margin:5rpx auto;">
						<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Frame@2x(12).png"
							style="width: 24rpx;height: 24rpx;" mode=""></image>
						<view class="" style="width: 460rpx;font-size: 18rpx;color: #BCBEC7;">
							亲爱的用户,本次活动期间,你需在当日完成首笔消费,并在次日及以后再次购物且满足68元以上可获取抽奖码
						</view>
					</view>
					<!-- 0是未答题 -->
					<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Button@2x(1).png" mode=""
						style="margin-top: 10rpx;position: absolute;bottom: 48rpx;" class="btn1"
						@click="close('全部任务已完成')" v-if="huojiangmaobj.dati != 0">
					</image>
					<view class="btn" @click="close('全部任务已完成')" v-else>
						点击获取更多抽奖码
					</view>

				</view>
			</view>


			<view class="choujiangmabox" v-if="typestr=='获取抽奖码'">
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/微信图片_20250506160104.png" class="back">
				</image>
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/微信图片_20250506144136.png" class="close"
					mode="" @click="close"></image>
				<view class="centertop">
					<view class="centertop_toptext">
						任务流程
					</view>
					<view class="renwufenleis">
						<view class="itembtn">
							任务一
						</view>
						<view class="itembtn">
							任务二
						</view>
						<view class="itembtn1">
							任务三
						</view>
					</view>
					<view class="jindu">
						<view class="center">
							<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Mask group@2x.png"
								class="centerimgjindu" mode=""></image>
							<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/download 49@2x.png"
								class="hjtou" mode="heightFix">
							</image>
						</view>
					</view>
					<view class="textsline">
						<view class="text">
							到店消费
						</view>
						<view class="text">
							答题并分享海报
						</view>
						<view class="text">
							次日消费
						</view>
					</view>
				</view>
				<view class="contents">
					<view class="title">
						消费达标，获取{{huojiangmaobj.jiang||1}}个抽奖码！
					</view>
					<view class="haibaobox">
						<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11468@2x.png" mode="">
						</image>
					</view>
					<view class="btn" @click="gopage('更多抽奖码')">
						点击获取更多抽奖码
					</view>
				</view>
			</view>
			<view class="centercjm" v-show="typestr=='抽奖码'">
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11531@2x.png"
					class="centercjmback" mode=""></image>
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Frame@2x(10).png" class="closeicon"
					@click="close" mode="">
				</image>
				<view class="centerbox">
					<view class="title">
						请填写抽奖兑换码
					</view>
					<view class="jihuomaform">
						<input type="text" v-model="cardnum" class="jhminpt" placeholder="抽奖兑换码" />
					</view>
					<view class="btn" @click="huoqu('获取抽奖码')">
						立即获取抽奖码
					</view>
				</view>
			</view>

			<view class="centeraddress" v-show="typestr=='地址'">
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11509@2x.png"
					class="centeraddressimg" mode="">
				</image>
				<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Frame@2x(10).png" class="closeicon"
					mode="" @click="close">
				</image>
				<view class="title">
					请选择奖品领取门店
				</view>
				<view class="addressboxs">
					<view :class="active==index?'addressboxs_item':'addressboxs_item backk'"
						style="background: url('https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Rectangle 24594@2x.png');background-size: 100% 100%;"
						v-for="(item,index) in shopList" :key="index" @click="active=index">
						<view class="dqright" v-if="active1==index">
							<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Rectangle 24598@2x.png"
								mode=""></image>
							<span>当前门店</span>
						</view>
						<view class="texts">
							<view class="t1">
								{{item.title}}
							</view>
							<view class="t2">
								<image src="https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Frame@2x(11).png"
									class="addressicon" mode=""></image>
								<view class="addresstt">
									{{item.address}} </br>距离：{{(item.distance).toFixed(2)}}km
								</view>
							</view>
						</view>
					</view>

				</view>
				<view class="btn" @click="xzmd()">
					确定
				</view>
			</view>
		</uni-popup>
		<Tabbar @denglu="denglu1" :page="page"></Tabbar>
		<userlogin ref="denglu" @updata="xzmd1"></userlogin>
	</view>
</template>

<script>
	import location from '@/common/js/location.js'
	import Tabbar from '@/components/tabbar.vue'
	import userlogin from '@/components/getuser/getuser.vue'
	import {
		getshop,
		xzmendian,
		homeinfo,
		shurujhma,
		bannerList,
		userinfo,
		passopen
	} from '@/common/api/api.js'
	export default {
		data() {
			return {
				barHeight: 0,
				statusBarHeight: 0,
				page: '',
				show: true,
				huojiangmaobj: {},
				typestr: '',
				shopList: [],
				active: 0,
				active1: -1,
				comnum: '',
				homeobj: {},
				list1: [
					"https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11508@2x.png",
					"https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11508@2x.png",
					"https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Group 11508@2x.png",
				],
				mendianname: '请选择奖品领取门店',

				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				cardnum: '',
				passOpen: 0,
			}
		},
		components: {
			Tabbar,
			userlogin
		},
		onLoad() {
			this.homeinit()
			this.initbanner()
			this.xzmd1()
		},
		mounted() {
			console.log('mounted');
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			const {
				top,
				height
			} = wx.getMenuButtonBoundingClientRect();
			this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
		},

		onShow() {
			if (uni.getStorageSync('token')) {
				this.passopeninit()
			}
			this.page = '/pages/home/index'
		},
		methods: {
			// 判断用户是否绑定门店 给起弹窗显示
			async passopeninit() {
				const res = await passopen()
				if (res.code == 1) {
					this.passOpen = res.data.pass_open
					this.comnum = res.data.comnum
					if (this.passOpen == 0) {
						this.$refs.denglu.getuserinfo()
					}
				}
			},
			async xzmd1() {
				var that = this
				if (uni.getStorageSync('token')) {
					const res1 = await userinfo()
					if (res1.code == 1) {
						if (res1.data.user.mid != 0) {
							uni.getLocation({
								type: 'gcj02',
								success: (res) => {
									that.getshopfun(res.longitude, res.latitude, '获取用户门店')
								},
								fail: (err) => {
									uni.showToast({
										title: '获取定位失败',
										icon: 'none'
									})
								}
							});
						}
					}
				}
			},
			getLocation() {
				var that = this
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						that.getshopfun(res.longitude, res.latitude)
					},
					fail: (err) => {
						uni.showToast({
							title: '获取定位失败',
							icon: 'none'
						})
					}
				});
			},
			denglu1() {
				this.$refs.denglu.DengLu()
			},
			// 首页轮播
			async initbanner() {
				const res = await bannerList()
				if (res.code == 1) {
					this.list1 = res.data.map(item => item.image)
				}
			},
			// 首页信息
			async homeinit() {
				const res = await homeinfo()
				if (res.code == 1) {
					console.log(res, 'res------------');
					this.homeobj = res.data
				}
			},
			// 附近店铺获取
			async getshopfun(lo, la, str) {
				const res = await getshop({
					lat: la || 12,
					lng: lo || 12
				})
				console.log(res, 'res------------');
				if (res.code == 1) {
					this.shopList = res.data

					const res1 = await userinfo()
					if (res1.code == 1) {
						if (res1.data.user.mid != 0) {

							var ind = this.shopList.findIndex(item => item.id == res1.data.user.mid)
							if (ind == -1) {
								ind = 0
							}
							this.mendianname = this.shopList[ind]['title']
							this.active1 = ind
							this.active = ind
						}
					}
					if (str != '获取用户门店') {
						this.typestr = '地址'
						this.$refs.popup.open('center')
					}
				}
			},
			// 选择门店
			async xzmd() {
				if (!uni.getStorageSync('token')) {
					this.$refs.denglu.DengLu()
					return
				}
				const res = await xzmendian({
					mid: this.shopList[this.active]['id']
				})
				if (res.code == 1) {
					this.active1 = this.active
					this.mendianname = this.shopList[this.active1]['title']
					this.$refs.popup.close()
				} else {
					this.$refs.popup.close()
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}

			},
			shareCustomImage() {
				uni.navigateTo({
					url: '/pages/my/jiangmarecord'
				})
			},
			// 输入激活码
			async huoqu(str) {
				if (!this.cardnum) {
					uni.showToast({
						icon: 'none',
						title: '请输入激活码'
					})
					return
				}
				const res = await shurujhma({
					cardnum: this.cardnum
				})
				if (res.code == 1) {
					if (res.data.step == 4) {
						this.typestr = '全部任务已完成'
						this.huojiangmaobj = res.data
						this.$refs.popup.open('center')

					} else if (res.data.step == 3) {
						// 显示获奖码数量 
						this.typestr = '任务已完成'
						this.$refs.popup.open('center')
						this.huojiangmaobj = res.data
					} else if (res.data.step == 2) {
						this.typestr = str
						this.$refs.popup.open('center')
						this.huojiangmaobj = res.data
					} else if (res.data.step == 1) {
						this.huojiangmaobj = res.data
						this.gopage('更多抽奖码')
					} else {
						// 今日任务已完成  弹窗告知  点击关闭
						this.typestr = '今日任务已完成'
						this.$refs.popup.open('center')
					}

				} else {
					this.cardnum = ''
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}

			},
			statr() {
				if (!uni.getStorageSync('token')) {
					this.$refs.denglu.DengLu()
					return
				}
				this.cardnum = ''
				this.typestr = '抽奖码'
				this.$refs.popup.open('center')
			},
			// 关闭弹窗
			close(str) {
				if (str == '选择门店') {
					if (!uni.getStorageSync('token')) {
						this.$refs.denglu.DengLu()
						return
					} else {
						this.xzmd()
					}
					return
				} else if (str == '全部任务已完成') {
					if (this.huojiangmaobj.dati == 0) {
						uni.switchTab({
							url: '/pages/dajiang/index'
						})
					}

				}
				this.$refs.popup.close()
			},
			gopage(str, id) {
				if (str == '活动详情') {
					uni.navigateTo({
						url: '/pages/home/activedetail?id=' + id
					})
				} else if (str == '通知公告') {
					uni.navigateTo({
						url: '/pages/home/inform'
					})
				} else if (str == '地址') {
					if (!uni.getStorageSync('token')) {
						this.$refs.denglu.DengLu()
						return
					}
					var that = this
					uni.getSetting({
						success: (res) => {
							if (!res.authSetting['scope.userLocation']) {
								console.log('授权位置');
								// 未授权，发起授权请求
								uni.authorize({
									scope: 'scope.userLocation',
									success: () => {
										that.getLocation();
									},
									fail: () => {
										uni.showModal({
											title: '提示',
											content: '需要位置权限才能使用该功能',
											showCancel: false,
											success() {
												uni.openSetting({
													success(res) {
														if (res
															.authSetting[
																'scope.userLocation'
															]) {

															that
																.getLocation();
														} else {
															uni.showToast({
																title: '位置授权失败',
																icon: 'none'
															})
														}
													}
												})
											}
										});
									}
								});
							} else {
								// 已授权，直接获取位置
								that.getLocation();
							}
						}
					});




				} else if (str == '详情') {
					uni.navigateTo({
						url: '/pages/home/detail?id=' + id
					})
				} else if (str == '更多抽奖码') {
					// 0是未答题 1是已经答过题关闭弹窗
					if (this.huojiangmaobj.dati == 0) {
						this.$refs.popup.close()
						uni.switchTab({
							url: '/pages/dajiang/index'
						})
					} else {
						this.$refs.popup.close()
					}

				}

			}
		}
	}
</script>

<style lang="scss">
	.pageimg {
		width: 100%;
	}

	.backk {
		background: url('https://huarun123.oss-cn-shenzhen.aliyuncs.com/static/Rectangle 24594@2x(1).png') !important;
	}



	@keyframes scaleAnimation {

		0%,
		100% {
			transform: scale(1);
			/* 原始大小 */
		}

		50% {
			transform: scale(0.9);
			/* 缩小到80% */
		}
	}

	.uni-margin-wrap {
		width: 100%;
		height: 896rpx;
		position: absolute;
		z-index: 0;
	}

	.swiper {
		height: 896rpx;

		image {
			width: 100%;
			height: 774rpx;
		}
	}

	.swiper-item {
		height: 896rpx;
	}

	@keyframes widenOnce {
		from {
			width: 0px;
		}

		to {
			width: 106rpx;
		}
	}

	// 今日任务已完成
	@keyframes widenOnce2 {
		from {
			width: 0px;
		}

		to {
			width: 302rpx;
		}
	}

	// 次日任务已完成
	@keyframes widenOnce1 {
		from {
			width: 0px;
		}

		to {
			width: 590rpx;
		}
	}

	.mendianname {
		width: 224rpx;
		text-align: center;
	}

	.choujiangmabox {
		width: 650rpx;
		height: 896rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;

		.back {
			width: 650rpx;
			height: 896rpx;
			position: absolute;
			z-index: -1;
		}

		.close {
			position: absolute;
			right: 0%;
			width: 45rpx;
			height: 45rpx;
			top: 0%;
		}

		.contents {
			width: 502rpx;
			margin: auto;
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				color: #FE34B9;
				font-family: 'Alimama';
				font-size: 40rpx;
				font-weight: bold;
				text-align: center;
				margin-top: 40rpx;
				margin-bottom: 30rpx;
			}

			.sharebtn {}

			.haibaobox {
				width: 482rpx;
				height: 290rpx;
				position: relative;

				image {
					width: 482rpx;
					height: 290rpx;
					position: absolute;
					z-index: -1;
				}
			}

			.btn {
				width: 502rpx;
				height: 72rpx;
				text-align: center;
				line-height: 72rpx;
				background: #8278FF;
				font-weight: bold;
				font-size: 30rpx;
				color: #FFFFFF;
				border-radius: 10rpx;
				position: absolute;
				bottom: 48rpx;
			}

			.btn1 {
				width: 502rpx;
				height: 72rpx;
				margin-top: 46rpx;
			}
		}

		.centertop {
			width: 602rpx;

			&_toptext {
				font-family: 'Alimama';
				font-weight: bold;
				font-size: 30rpx;
				color: #FE34B9;
				margin-top: 14rpx;
			}

			.jindu {
				width: 100%;
				height: 30rpx;
				background: #8395FF;
				border-radius: 15rpx 15rpx 15rpx 15rpx;
				margin: auto;
				margin-top: 20rpx;

				.center1 {
					width: 590rpx;
					height: 30rpx;
					background: #8278FF;
					box-shadow: inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.23), inset 0rpx -4rpx 8rpx 0rpx #665AFF;
					border-radius: 15rpx 15rpx 15rpx 15rpx;
					position: relative;
					display: flex;
					align-items: center;
					transition: 1s;
					animation: widenOnce1 2s 1;

					/* 关键：animation-iteration-count设为1 */
					.hjtou {
						width: 44.25rpx;
						height: 76.79rpx;
						position: absolute;
						right: -5%;
					}

					.centerimgjindu {
						width: 100%;
						height: 30rpx;
						position: absolute;
						border-radius: 15rpx 15rpx 15rpx 15rpx;
					}
				}

				.center2 {
					width: 302rpx;
					height: 30rpx;
					background: #8278FF;
					box-shadow: inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.23), inset 0rpx -4rpx 8rpx 0rpx #665AFF;
					border-radius: 15rpx 15rpx 15rpx 15rpx;
					position: relative;
					display: flex;
					align-items: center;
					transition: 1s;
					animation: widenOnce2 2s 1;

					/* 关键：animation-iteration-count设为1 */
					.hjtou {
						width: 44.25rpx;
						height: 76.79rpx;
						position: absolute;
						right: -5%;
					}

					.centerimgjindu {
						width: 100%;
						height: 30rpx;
						position: absolute;
						border-radius: 15rpx 15rpx 15rpx 15rpx;
					}
				}

				.center {
					width: 106rpx;
					animation: widenOnce 2s 1;
					height: 30rpx;
					background: #8278FF;
					box-shadow: inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.23), inset 0rpx -4rpx 8rpx 0rpx #665AFF;
					border-radius: 15rpx 15rpx 15rpx 15rpx;
					position: relative;
					display: flex;
					align-items: center;

					.hjtou {
						width: 44.25rpx;
						height: 76.79rpx;
						position: absolute;
						right: -5%;
					}

					.centerimgjindu {
						width: 100%;
						height: 30rpx;
						position: absolute;
						border-radius: 15rpx 15rpx 15rpx 15rpx;
					}
				}
			}

			.textsline {
				width: 494rpx;
				margin: auto;
				margin-top: 28rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #1D2129;
				}
			}

			.renwufenleis {
				width: 510rpx;
				margin: auto;
				margin-top: 26rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.itembtn {
					width: 112rpx;
					height: 40rpx;
					background: #8278FF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					line-height: 40rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: center;
				}

				.itembtn1 {
					width: 112rpx;
					height: 40rpx;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					line-height: 40rpx;
					background: rgba(130, 120, 255, 0.5);
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}

	}

	.centercjm {
		width: 650rpx;
		height: 456rpx;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		overflow: hidden;
		position: relative;

		.centercjmback {
			width: 650rpx;
			height: 456rpx;
			position: absolute;
			z-index: -1;
		}

		.closeicon {
			position: absolute;
			width: 36rpx;
			height: 36rpx;
			right: 22rpx;
			top: 22rpx;
		}

		.centerbox {
			width: 586rpx;
			margin: auto;
			margin-top: 72rpx;

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #1D2129;
				width: 100%;
				text-align: center;
			}

			.btn {
				width: 586rpx;
				height: 72rpx;
				background: #8278FF;
				border-radius: 8rpx;
				text-align: center;
				line-height: 72rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #FFFFFF;
				position: absolute;
				bottom: 48rpx;
			}

			.jihuomaform {
				width: 586rpx;
				height: 88rpx;
				background: #F7F8FA;
				border-radius: 8rpx;
				;
				overflow: hidden;
				display: flex;
				align-items: center;
				margin-top: 50rpx;
				justify-content: center;

				.jhminpt {
					width: 88%;
					font-size: 30rpx;
					margin-right: 20rpx;
				}
			}
		}
	}

	.centeraddress {
		width: 594rpx;
		overflow: hidden;
		height: 736rpx;
		position: relative;

		.btn {
			width: 530rpx;
			height: 72rpx;
			background: #8278FF;
			border-radius: 12rpx;
			text-align: center;
			line-height: 72rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #FFFFFF;
			margin: auto;
			margin-top: 34rpx;


		}

		.centeraddressimg {
			width: 594rpx;
			height: 736rpx;
			position: absolute;
			z-index: -1;
		}

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #1D2129;
			width: 100%;
			text-align: center;
			margin-top: 74rpx;
		}

		.addressboxs {
			width: 530rpx;
			margin: auto;
			height: 444rpx;
			margin-top: 24rpx;
			overflow-y: scroll;

			&_item {
				width: 530rpx;
				// height: 132rpx;
				margin-bottom: 24rpx;
				position: relative;
				overflow: hidden;

				.dqright {
					width: 110rpx;
					height: 36rpx;
					position: absolute;
					right: 0%;
					top: 0%;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 20rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 36rpx;
					display: flex;
					justify-content: center;
					z-index: 999;

					image {
						width: 110rpx;
						height: 36rpx;
						z-index: -1;
						position: absolute;

					}
				}

				.texts {
					width: 482rpx;
					margin: auto;
					overflow: hidden;

					.t1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #1D2129;
						margin-top: 24rpx;
					}

					.t2 {
						display: flex;
						width: 100%;
						margin-top: 28rpx;
						margin-bottom: 28rpx;

						.addressicon {
							width: 32rpx;
							height: 32rpx;
						}

						.addresstt {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #86909C;
							width: 100%;
							// display: -webkit-box;
							// -webkit-line-clamp: 1;
							// -webkit-box-orient: vertical;
							// overflow: hidden;
						}
					}
				}

				&_img {
					width: 530rpx;
					height: 132rpx;
					position: absolute;
					z-index: -1;
				}
			}
		}

		.closeicon {
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			right: 24rpx;
			top: 24rpx;
		}
	}

	.home {
		width: 100%;
		position: relative;
		// overflow: hidden;
		// height: 100vh;

		.homeimg {
			width: 100%;
			height: 1704rpx;
			position: absolute;
			z-index: -1;
		}

		.bottombox {
			width: 100%;
			overflow: hidden;
			margin-top: 656rpx;
			position: absolute;
			z-index: 9;

			&_img {
				width: 100%;
				height: 853.25rpx;
				position: absolute;
				z-index: -1;
			}

			.timechoujiang {
				width: 554rpx;
				margin: 30rpx auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: bold;
				font-size: 32rpx;
				color: #1D2129;

				image {
					width: 110rpx;
					height: 5rpx;
				}
			}

			.go {
				width: 628rpx;
				height: 194rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin: auto;
				display: block;
			}

			.gobtn {
				width: 601.88rpx;
				height: 144.75rpx;
				display: block;
				margin: auto;
				margin-top: 50rpx;
				animation: scaleAnimation 2s infinite;
			}

			.centerbox {
				width: 728rpx;
				height: 648rpx;
				margin: auto;
				overflow: hidden;
				margin-top: 108rpx;
				margin-bottom: 98rpx;

				&_img {
					width: 97%;
					height: 648rpx;
					position: absolute;
					z-index: -1;
				}

				.caozuobox {
					width: 634rpx;
					height: 94rpx;
					background: #E2E6FF;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					margin: auto;
					margin-top: 56rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.arrow {
						width: 24rpx;
						height: 24rpx;
						margin-right: 24rpx;
					}

					.texts {
						margin-left: 24rpx;

						.t1 {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 26rpx;
							color: #1D2129;
						}

						.t2 {
							font-weight: 400;
							font-size: 25rpx;
							color: #4E5969;
							margin-top: 10rpx;
						}
					}
				}
			}
		}

		.headerbox {
			width: 100%;
			overflow: hidden;
			position: fixed;
			z-index: 999;

			.header {
				width: 100%;
				height: var(--status-bar-height);
				// height: 64rpx;
				// overflow: hidden;
				// margin-top: 100rpx;
				margin-bottom: 14rpx;
				display: flex;
				align-items: center;
				position: relative;

				.arrowbox1 {
					height: 64rpx;
					width: 64rpx;
					margin-left: 98rpx;
					position: relative;

					.arrowbox {
						height: 64rpx;
						width: 64rpx;
					}

					.readuce {
						width: 15rpx;
						height: 15rpx;
						position: absolute;
						border-radius: 50%;
						background: red;
						top: 0%;
						right: 0%;
					}
				}


				.shanglogo {
					width: 330rpx;
					height: 64rpx;
					background: rgba(255, 255, 255, 0.6);
					border-radius: 50rpx 50rpx 50rpx 50rpx;
					border: 1rpx solid rgba(151, 151, 151, 0.2);
					display: flex;
					align-items: center;
					margin-left: 38rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #1D2129;

					.logo {
						width: 33rpx;
						height: 33rpx;
						margin-left: 16rpx;
						margin-right: 6rpx;
					}

					.arrow {
						width: 32rpx;
						height: 32rpx;
						margin-left: 6rpx;
					}
				}
			}
		}
	}
</style>